html+css+js轮播图 |
您所在的位置：网站首页 › html 轮播图教程 › html+css+js轮播图 |
html+css+js轮播图
|
本文介绍：通过html+css+js实现轮播图效果——自动轮播、左右箭头切换图片、小圆点点击切换图片 （注意这里采用字体图标） 1、html（这里就不多介绍） js轮播图 //字体图标样式引入 //引入css样式
2、css（这里就不多介绍） *{ margin: 0; padding: 0; } .bigbox{ width: 560px; height: 360px; background-color: aqua; margin-left: 110px; position: relative; margin: 100px auto; overflow: hidden; } .imgall{ width: 3360px; height: 360px; font-size: 0; background-color: bisque; transform: translateX(0); transition: all 0.3s; } .imgall img{ width: 560px; height: 360px; } .jiantouone{ width: 50px; height: 60px; background-color: rgb(79, 79, 79); position: absolute; top: calc(50% - 30px); left: -60px; display: flex; justify-content: center; align-items: center; border-radius: 0 6px 6px 0; transition: all 0.2s; } .jiantouone>span{ color: white; } .jiantoutwo{ width: 50px; height: 60px; background-color: rgb(79, 79, 79); position: absolute; top: calc(50% - 30px); right: -60px; display: flex; justify-content: center; align-items: center; border-radius: 6px 0 0 6px; transition: all 0.2s; } .jiantoutwo>span{ color: white; } .yuan{ width: 110px; height: 20px; position: absolute; left: calc(50% - 55px); bottom: 10px; } .yuan div{ width: 14px; height: 14px; border-radius: 7px; background-color: #999; float: left; margin: 0 2px; } .yuan div:first-child{ background-color: blueviolet; } .imgall:hover{ animation-play-state: paused; cursor: pointer; } .bigbox:hover .jiantouone{ left: 0; } .bigbox:hover .jiantoutwo{ right: 0; }3、这段JS实现了一个轮播图的效果，包括了向左、向右切换图片、自动轮播、鼠标悬停停止轮播、小圆点点击切换图片等功能。 具体实现方式是通过获取图片容器、图片、小圆点等元素，监听鼠标事件和小圆点点击事件，计算图片移动距离进行轮播图片的切换。其中的变量、函数和方法含义如下： （1）变量： imgall：图片容器imgs：所有图片元素circles：小圆点集合num：当前轮播到的图片索引 （2）函数：left(obj)：向左切换图片函数right(obj)：向右切换图片函数slide()：轮播图片的函数 （3）方法：getElementsByClassName()：通过类名获取元素集合getElementsByTagName()：通过标签名获取元素集合querySelectorAll()：通过选择器获取元素集合setInterval()：定时器函数，实现自动轮播clearInterval()：清除定时器，停止轮播addEventListener()：添加事件监听器，监听点击事件style.transform：设置元素的CSS transform属性，实现动画效果 代码如下： let imgall=document.getElementsByClassName("imgall")[0]; let imgs=imgall.getElementsByTagName("img"); let circles = document.querySelectorAll(".yuan div"); let num=0; // console.log(circles); // 向左 function left(obj){ num--; if(num5){ num=0; } slide(); } // 加载自动轮播 let stop; let box=document.getElementsByClassName("bigbox")[0]; console.log(box); window.onload=function(){ stop=setInterval(right,1000); } box.onmousemove=function(){ console.log(111); clearInterval(stop); } box.onmouseout=function(){ stop=setInterval(right,1000); } // 轮播 function slide(){ let move=(-num)*560; imgall.style.transform=`translateX(${move}px)`; circles.forEach(function(circle,index){ if(num==index){ circle.style.backgroundColor="blueviolet"; }else{ circle.style.backgroundColor="#999"; } }) } // 小圆点 circles.forEach(function(circle,index){ // console.log(circle); // console.log(index); circle.addEventListener("click",function(){ num=index; // console.log(num); slide(); // return num; }); })
|
案例图片来源于觉唯网站【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |